<template>
  <div>
      <el-table
        :data="data"
        :style="{textAlign: 'center'}"
        border>
        <el-table-column
          prop="id"
          label="id"
          width="80">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="70">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="180">
        </el-table-column>
        <el-table-column
          prop="familyAddress"
          width="150"
          label="家庭地址">
        </el-table-column>
        <el-table-column
          prop="workAddress"
          width="150"
          label="工作地址">
        </el-table-column>
        <el-table-column
          prop="personIntro"
          width="450"
          label="个人介绍">
        </el-table-column>

        <el-table-column
          prop="createTime"
          width="150"
          label="注册时间">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          width="150"
          label="最后登陆时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          v-show="theoppr"
          :width="100">
          <template slot-scope="scope">
            <div style="display: flex;">
              <el-button  type="text" size="small" @click="handleClick(scope.row)" >编辑</el-button>
              <el-button type="text" size="small" @click="handDel(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
      :style="{margin:10+'px'}"
          background
          layout="prev, pager, next"
          @current-change="getNowPageNum"
          :total="this.total">
      </el-pagination>


      <el-dialog title="用户信息修改" :visible.sync="dialogFormVisible" width="40%">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off" type="text" maxlength="10" show-word-limit> </el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off"> </el-input>
          </el-form-item>
          <el-form-item label="家庭地址" :label-width="formLabelWidth">
            <el-input v-model="form.familyAddress" autocomplete="off" type="textarea" maxlength="50" show-word-limit> </el-input>
          </el-form-item>
          <el-form-item label="工作地址" :label-width="formLabelWidth">
            <el-input v-model="form.workAddress" autocomplete="off" type="textarea" maxlength="50" show-word-limit> </el-input>
          </el-form-item>
          <el-form-item label="个人介绍" :label-width="formLabelWidth">
            <el-input v-model="form.personIntro" autocomplete="off" type="textarea" maxlength="100" show-word-limit rows="4"> </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserInfo">确 定</el-button>
        </div>
      </el-dialog>

  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  import UserApi from '@/api/user.js'
  export default {
    data() {
      return {
        data:[],
        total:10,
        pageNum:15,
        form: {
          username: '',
          password: '',
          sex: '',
          familyAddress: '',
          workAddress: '',
          personIntro: '',
        },
        formLabelWidth: '100px',
        dialogFormVisible: false,
      }
    },
    methods:{
      handDel(row){
        this.$confirm('确定删除?', '温馨提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          UserApi.deleteUser(row.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功',
              center: true,
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
            center: true
          });
        })
      },
      getNowPageNum(pages){
        UserApi.getUserList(pages,this.pageNum).then(res => {
          this.data = res.data.list
        })
      },
      handleClick(row){
        this.form.username = row.username
        this.form.email = row.email
        this.form.personIntro = row.personIntro
        this.form.familyAddress = row.familyAddress
        this.form.workAddress = row.workAddress
        this.form.sex = row.sex
        this.dialogFormVisible = true
      },
      updateUserInfo(){
        UserApi.UpdateUserInfo(this.form).then(res => {
          UserApi.getUserList(1,this.pageNum).then(res => {
            this.data = res.data.list
            this.total = 10* res.data.pages
            this.dialogFormVisible = false
          })
        })
      }
    },
    created() {
      UserApi.getUserList(1,this.pageNum).then(res => {
        this.data = res.data.list
        this.total = 10* res.data.pages
      })
    }
  }
</script>
